<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Register</title>
<link rel="stylesheet" type="text/css" href="ezos-style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
    swfobject.embedSWF("round_menu4.swf", "flashnav", "960", "70", "9.0.0");
</script>
<script type="text/javascript" src="validation.js"></script>

<style>
  
.slidinghead{
	border: 1px solid #CCC;
        width: 698px;
        overflow: hidden;
        float: left;
}
#slidingbody {
				width: 8000px;
			margin: 0;
}

.panelsliding {
			width: 930px;
			float: left;
			padding-left: 30px;
			padding-right: 1040px;
			padding-top: 45px;
			background: #eee;
			
		}
		
		.contentbox-wrapper{			
			position:relative; 
			left:0; 
			width:3000px; 
			height:100%;
		}
		
		.contentbox{
			width:700px; 
			height:100%; 
			float:left; 
			padding:10px;
			background:#fff;
		}
		
		#sidebar1 a.active{
			font-weight:bold;
		}	
input::-webkit-input-placeholder {
    font-style: italic;
}
input:-moz-placeholder {
    font-style: italic;
}
input::-moz-placeholder {
    font-style: italic;
}
input:-ms-input-placeholder {
    font-style: italic;
}

 
</style>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>

function goto(id, t){	
	//animate to the div id.
	$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 1200);
	
	// remove "active" class from all links inside #nav
    $('#sidebar1 a').removeClass('active');
	
	// add active class to the current link
    $(t).addClass('active');	
}

</script>
<!--
<script src="jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>	
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
		       $("#sidebar11 a").bind("click",function(event){
		           event.preventDefault();
		           var target = $(this).attr("href");
		           $("html, .slidinghead").stop().animate({
		               scrollLeft: $(target).offset().left,
					   scrollTop: $(target).offset().top
		           }, 1200);
		       });
			});
		</script>
-->
</head>

<body>
<div id="layout">
<div id="topNav"><div id="textnav">
PROMO: FREE DELIVERY --- HAVE TRIED OUR EASY ONLINE SHOPPING? SIGN UP NOW -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="member.html">Member</a>
</div></div>

<!--
<a href="home.html"><center><img src="images/ezos-logo.png" width="130px" height="91px" align="middle"/></center></a>-->
<object type="application/x-shockwave-flash" data="logo_animated.swf" 
    width="1060" height="114"> 

    <param name="movie" value="logo_animated.swf" />
    <param name="quality" value="high" />
</object>

<object type="application/x-shockwave-flash" data="round_menu4.swf" 
    width="1060" height="70"> 

    <param name="movie" value="round_menu4.swf" />
    <param name="quality" value="high" />
</object>

<div class="content">
 <img src="images/rib-reg.png" alt="" style="position:relative; top:2em; left:15em; z-index:0" />
<center>

<div id="registercontainer" style="width:600px; height:auto; border:1px solid #d3d3d3; background-color:#f5faf8;">
<div id="logincontent" style="width:600px; margin:30px 0px 30px 0px !important;  font-family: "Helvetica Neue", arial, sans-serif; font-size:12px;  background-color:transparent; ">

<form name="loginform" action="#" method="post" onsubmit="return validateregister();">
  <table width="520">
  <tr>
  <th width="111" align="right">Username:</th>
  <td align="left" width="240"><input type="text" name="username" size="40" placeholder="at least 3 valid characters" /></td>
  </tr>
  
  <tr>
  <th align="right">First Name:</th>
  <td align="left"><input type="text" name="firstname" size="40" /></td>
  </tr>
  
  <tr>
  <th align="right">Last Name:</th>
  <td align="left"><input type="text" name="lastname" size="40" /></td>
  </tr>
  
  <tr>
  <th align="right">Email:</th>
  <td align="left"><input type="text" name="email" size="40" placeholder="username@domain.com" /></td>
  </tr>
  
  <tr>
  <th align="right">Password:</th>
  <td align="left"><input type="password" name="password"  size="40" /></td>
  </tr>
  
  <tr>
  <th align="right">Confirm-Password:</th>
  <td align="left"><input type="password" name="confirm_password" size="40" /></td>
  </tr>
  
  <tr>
  <th align="right">Date Of Birth:</th>
  <td align="left"><input type="text" name="day" value="day" size="5" onfocus="this.style.color = '#000'; if (this.value == 'day') {this.value = ''; this.style.color='#999';} else{this.style.color='#000';}" onblur="if (this.value == '') {this.value = 'day'; this.style.color='#999';} else{this.style.color='#000';}" onclick="this.style.color='#000'" style="color:#999" maxlength="2" />
  <select name="month" >
  <option value="Jan">January</option>
  <option value="Feb">February</option>
  <option value="Mar">March</option>
  <option value="Apr">April</option>
  <option value="May">May</option>
  <option value="Jun">June</option>
  <option value="Jul">July</option>
  <option value="Aug">August</option>
  <option value="Sep">September</option>
  <option value="Oct">October</option>
  <option value="Nov">November</option>
  <option value="Dec">December</option>
     </select>
  <input type="text" name="year" value="year" size="5" onfocus="this.style.color = '#000'; if (this.value == 'year') {this.value = ''; this.style.color='#999';} else{this.style.color='#000';}" onblur="if (this.value == '') {this.value = 'year'; this.style.color='#999';} else{this.style.color='#000';}" onclick="this.style.color='#000'" style="color:#999" maxlength="4" />
  </td>
  </tr>
  
   <tr>
  <th align="right">Gender:</th>
  <td align="left">
  <select name="birthday" >
  <option value="M">Male</option>
  <option value="F">Female</option>
     </select>
  </td>
  </tr>
  
  <tr>
  <th align="right">Phone:</th>
  <td align="left"><input type="text" name="phone" size="40" maxlength="8" placeholder="leave your area number behind" /></td>
  </tr>
  
  <tr>
  <th align="right">Address:</th>
  <td align="left"><input type="text" name="town" size="40" />
  </td>
  </tr>
  
  <tr>
  <th align="right">Postcode:</th>
  <td align="left">
  <input type="text" name="postcode" size="40" maxlength="6" placeholder="example: 123456" /></td>
  </tr>
   </table>
    <center><button class="button" type="submit"><img src="images/but-reg.png" alt="" style="cursor:pointer" onmouseover="this.src='images/but-reg-hover.png'" 
onmouseout="this.src='images/but-reg.png'" /></button></center>
</form></div>
</div>

</center>
</div>

<br /><br /><br />
</div>
</body>
</html>
